<script setup type="ts">
import { uploadJson } from '@/api/graph'
import { Message } from '@arco-design/web-vue'
import { Back } from '@icon-park/vue-next'
import { useGraphStore } from '@/store/modules/graphStore'
import { useRouter } from 'vue-router'

const { exportToGraph, getPageList, graph } = useGraphStore()
const importToGraph = async (option) => {
  try {
    const { fileItem } = option
    const params = new FormData()
    params.append('file', fileItem.file)
    params.append('canvasKey', graph.info.canvasKey)
    await uploadJson(params)
    Message.success('导入成功')
    await getPageList()
  } catch (e) {
    console.log(e)
    Message.error(e.message)
  }
}
const router = useRouter()
const goBack = () => {
  router.push('/dashboard')
}
</script>

<template>
  <div
    class="graph-header p-1.5 flex items-center justify-between text-arco-neutral-8 border-b border-arco-neutral-3"
  >
    <div class="graph-header-lt">
      <a-tooltip content="返回" placement="bottom" mini>
        <a-button size="small" @click="goBack">
          <template #icon>
            <Back theme="outline" size="14" />
          </template>
        </a-button>
      </a-tooltip>
    </div>
    <div class="graph-header-rt flex items-center">
      <a-space size="mini">
        <a-upload
          :custom-request="importToGraph"
          :show-file-list="false"
          accept=".json"
        >
          <template #upload-button>
            <a-button size="mini"> 导入 </a-button>
          </template>
        </a-upload>
        <a-button size="mini" @click="exportToGraph">导出</a-button>
      </a-space>
    </div>
  </div>
</template>
